<!--
 * @Author: Xujianchen
 * @Date: 2024-11-02 15:09:32
 * @LastEditors: Xujianchen
 * @LastEditTime: 2024-11-07 14:47:20
 * @Description: 日历
-->
<template>
  <Wrapper>
    <el-calendar v-model="value">
      <template #date-cell="{ data }">
        <el-row justify="space-between" style="width: 100%">
          <div class="flex">
            <el-text>{{ data.day.split('-').slice(1).join('-') }}</el-text>
            <el-tooltip v-if="data.isSelected" content="今天">
              <icon class="calendar-today" name="Promotion" />
            </el-tooltip>
          </div>
          <div class="calendar-edit flex">
            <icon name="EditPen" size="14" />
          </div>
        </el-row>
        <div v-if="isEvenDay(data.day)" class="calendar-none flex">
          <icon name="Calendar" size="20" color="#dcdfe6" />
          <el-text type="info">暂无排班</el-text>
        </div>
        <div v-else class="calendar-content">
          <div class="calendar-content-item" :style="getStyle('primary')">
            <icon name="Sunrise" />
            <span>早班</span>
          </div>
          <div class="calendar-content-item" :style="getStyle('success')">
            <icon name="Sunny" />
            <span>午班</span>
          </div>
          <div class="calendar-content-item" :style="getStyle('warning')">
            <icon name="Moon" />
            <span>晚班</span>
          </div>
        </div>
      </template>
    </el-calendar>
  </Wrapper>
</template>

<script setup>
const value = ref(new Date())

function isEvenDay(dateString) {
  const parts = dateString.split('-')
  if (parts.length !== 3) {
    throw new Error('日期格式不正确，应该为 YYYY-MM-DD')
  }
  // 获取日期部分并转换为整数
  const day = parseInt(parts[2], 10)
  return day % 2 === 0
}

function getStyle(type) {
  return {
    backgroundColor: `var(--el-color-${type}-light-9)`,
    border: `1px solid var(--el-color-${type}-light-8)`,
    color: `var(--el-color-${type})`,
  }
}
</script>

<style scoped lang="scss">
:deep(.el-calendar-table .el-calendar-day) {
  height: auto !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
:deep(.el-calendar-table td.is-selected) {
  background-color: transparent;
}
:deep(.el-calendar-table .prev:hover),
:deep(.el-calendar-table .current:hover) {
  background-color: var(--el-calendar-selected-bg-color);
  cursor: pointer;
  .calendar-edit {
    color: var(--el-color-primary);
    border-color: var(--el-color-primary);
  }
}
:deep(.el-calendar-table .el-calendar-day:hover) {
  background-color: transparent;
}

.calendar {
  &-edit {
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--el-border-color);
  }
  &-none {
    margin-top: $space-small-s;
    justify-content: center;
    flex-direction: column;
    .el-text {
      margin-top: $space-small;
    }
  }
  &-content {
    width: calc(100% - $space-medium-s * 2);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 $space-small-s;
    margin-top: $space-small-s;
    padding: 0 $space-medium-s;
    &-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: $font-size-small;
      border-radius: 4px;
      padding: 8px;
      text-align: center;
    }
  }
  &-today {
    margin-left: 8px;
  }
}
</style>
